<template>
  <div>
    <DocHeader :title="data.title" fromDoc="pressureUlcerRiskNotice" />
    <div class="docMain">
      尊敬的患者及家属:
      <div style="text-indent: 2em">
        我们对您（您的家人）的疾病程度及身体状况等进行了综合评估，结果显示，您（您的家人）属于压疮风险人群，有可能发生压疮。现将压疮预防措施、陪护人员配合护理工作等有关事项和风险告知如下
      </div>
      一、常见原因<br />
      1.强迫体位:如重要脏器功能衰竭（肝衰、心衰、昏迷等）、偏瘫、高位截瘫、骨盆骨折、生命体征不稳定等病情需要严格限制翻身。<br />
      2.高龄（≥70周岁）、白蛋白低于30g、极度消瘦、高度浮肿、大小便失禁等<br />
      二、压疮容易发生的部位<br />
      骨突处，如骶尾部、坐骨结节、股骨结节、足跟部、踝部、枕部、肩胛部、耳廓。<br />
      三、防范压疮的措施<br />
      1.保持皮肤清洁干燥;衣裤及床单位整洁舒适。<br />
      2.有效减压措施:使用气垫床、翻身垫、软枕、各类敷料。<br />
      3.协助翻身，至少2小时一次，避免拖、拉、拽。<br />
      4.侧卧位患者尽量&lt;30°，使用三角垫等局部減压，双腿间垫软枕。（病情需要，如侧卧位>30°时应避免90侧卧。）<br />
      5.半卧位患者尽量&lt;30°，可稍摇高床尾避免下滑。<br />
      6.坐位患者，臂部采取局部减压措施，每30分钟拍空1次<br />
      7、尽量保持双足骨突处部位悬空（避免使用气圈、脚圈）;正确使用便盆
      <div style="text-indent: 2em">
        压疮一旦发生，对患者的健康危害很大，严重时可能危及生命，后续的治疗、护理非常困难。因此，我们将采取相关措施进行预防，并希望得到您的配合。谢谢合作!
      </div>
    </div>
    <div class="flexBox">
      <div class="item">患者（家属）签名：</div>
      <div class="item">与患者的关系：</div>
    </div>
    <div class="flexBox">
      <div class="item">
        护士签名：
        <img
          v-if="signPhoto(sign, 'nursingDocument', data.type)"
          :src="
            'data:image/png;base64,' +
            signPhoto(sign, 'nursingDocument', data.type)
          "
          alt=""
          style="display: block; max-width: 98%; height: 24px"
          @click="handleSignImgClear"
        />
        <el-input
          v-else
          v-model="sign"
          style="width: 100px"
          @blur="handleSignInputBlur"
        ></el-input>
      </div>
      <div class="item">
        告知时间：
        <DateSelection
          v-model="time"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!time"
          style="padding: 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      sign: '',
      time: +new Date()
    })
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )
    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 2em;
  margin-top: 10px;
  margin-bottom: 100px;
}

.flexBox {
  display: flex;
  margin-top: 60px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
